<template>
  <div class="page-container">
    <div class="page-card-container" v-global-loading="tableLoading">
      <div class="flex-row-xbetween-ycenter mb-20">
        <div></div>
        <div class="flex-row-xy-center">
          <div class="commonBtn-primary mr-10" @click="goHandle(1)">新增</div>
        </div>
      </div>

      <a-table
        :scroll="{x: 2000}"
        row-key="id"
        size="small"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
      >
        <template #bodyCell="{text, record, index, column}">
          <div class="flex-row-xy-center" v-if="column.title == '图标'">
            <IconTem :url="text"></IconTem>
          </div>
          <div
            class="flex-row-xy-center c-primaryColor"
            v-if="column.title == '操作'"
          >
            <div class="pointer" @click="goHandle(2, record)">编辑</div>
            <div class="pointer ml-10" @click="goHandle(3, record)">删除</div>
          </div>
        </template>
      </a-table>
    </div>

    <a-drawer
      width="60%"
      v-model:open="show"
      :title="handleTitle"
      :destroyOnClose="true"
    >
      <a-form ref="formRef" :model="form" :label-col="{span: 8}">
        <a-row>
          <a-col :span="12">
            <a-form-item
              label="路由标题"
              name="title"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="form.title" />
            </a-form-item>
          </a-col>
          <!--          <a-col :span="12">-->
          <!--            <a-form-item-->
          <!--                label="路由名称"-->
          <!--                name="name"-->
          <!--                :rules="[{ required: true, message: '请输入' }]"-->
          <!--            >-->
          <!--              <a-input v-model:value="form.name"/>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :span="12">
            <a-form-item
              label="菜单类型"
              name="type"
              :rules="[{required: true, message: '请选择'}]"
            >
              <a-select allow-clear v-model:value="form.type">
                <a-select-option :value="0">目录</a-select-option>
                <a-select-option :value="1">菜单</a-select-option>
                <a-select-option :value="2">按钮</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="图标">
              <div class="pointer" @click="goCheckIcon">
                <div class="flex-row-ycenter" v-if="form.icon">
                  <IconTem class="mr-10" :url="form.icon"></IconTem>
                </div>
                <component v-else is="plus-outlined" class="fs24"></component>
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="父级">
              <a-tree-select
                v-model:value="form.pid"
                show-search
                :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
                allow-clear
                tree-default-expand-all
                tree-node-filter-prop="title"
                :tree-data="treeData"
                :field-names="{value: 'id'}"
              >
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.openType != 3">
            <a-form-item
              label="路由地址"
              name="router"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="form.router" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="组件路径"
              name="component"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="form.component" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="唯一标识"
              name="code"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="form.code" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="重定向地址">
              <a-input v-model:value="form.redirect" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="跳转类型"
              name="openType"
              :rules="[{required: true, message: '请选择'}]"
            >
              <a-select v-model:value="form.openType">
                <a-select-option :value="0">不跳转</a-select-option>
                <a-select-option :value="1">组件</a-select-option>
                <a-select-option :value="2">内链</a-select-option>
                <a-select-option :value="3">外链</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.openType == 3">
            <a-form-item
              label="外链地址"
              name="link"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-input v-model:value="form.link" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="状态"
              name="status"
              :rules="[{required: true, message: '请输入'}]"
            >
              <a-select v-model:value="form.status">
                <a-select-option :value="1">启用</a-select-option>
                <a-select-option :value="0">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否隐藏">
              <a-switch v-model:checked="form.isHidden" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否隐藏子菜单">
              <a-switch v-model:checked="form.isHiddenChildren" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序">
              <a-input v-model:value="form.sortId" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="flex-row-xy-center">
          <a-button style="margin-right: 20px" @click="show = false"
            >取消</a-button
          >
          <a-button type="primary" @click="showCon">提交</a-button>
        </div>
      </template>
    </a-drawer>
    <Icon ref="IconRef" v-model:url="form.icon"></Icon>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, h, inject, ref, onMounted, onActivated} from "vue";
import useAppStore from "@/store/app";
import {Modal} from "ant-design-vue";
import Icon from "@/components/icon/Icon.vue";
import IconTem from "@/components/icon/IconTem.vue";

import {
  menuList,
  menuDetail,
  menuDelete,
  menuUpdate,
  menuAdd,
  menuTree
} from "@/api/configCenter/platform/menu";

const show = ref(false);
const form = ref({});
const tableData = ref([]);
const handleType = ref<number>();
const formRef = ref();
const handleTitle = ref("");
const tableLoading = ref(false);
const reload = inject("reload");
const IconRef = ref();
const pageSet = ref({});
const {proxy} = getCurrentInstance();

const loadPagination = () => {
  tableLoading.value = true;
  menuList(pageSet.value)
    .then((res) => {
      tableData.value = res.data;
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};
loadPagination();

const treeData = ref([]);
const loadTreeData = () => {
  menuTree().then((res) => {
    treeData.value = res.data;
  });
};
loadTreeData();

proxy.$emitter.on("checkIcon", (e) => {
  form.value.icon = e;
});

const goCheckIcon = () => {
  IconRef.value.showIcon = true;
};

const goHandle = (type: number, item?: any) => {
  handleType.value = type;
  form.value = {};
  if (formRef.value) {
    //重置验证
    formRef.value.clearValidate();
  }
  if (handleType.value == 1) {
    //添加显示
    handleTitle.value = "新增";
    show.value = true;
  }
  if (handleType.value == 2) {
    //编辑显示
    useAppStore.loading = true;
    handleTitle.value = "编辑";
    menuDetail({id: item.id})
      .then((res) => {
        form.value = res.data;
        show.value = true;
        useAppStore.loading = false;
      })
      .catch(() => {
        useAppStore.loading = false;
      });
  }
  if (handleType.value == 3) {
    //删除
    Modal.confirm({
      title: "您确定要删除吗?",
      onOk() {
        useAppStore.loading = true;
        menuDelete({id: item.id})
          .then((res) => {
            useAppStore.loading = false;
            loadPagination();
            loadTreeData();
          })
          .catch((err) => {
            useAppStore.loading = false;
          });
      }
    });
  }
};

const showCon = () => {
  if (handleType.value == 1) {
    //添加
    formRef.value.validate().then((res) => {
      useAppStore.loading = true;
      if (!form.value.pid) {
        form.value.pid = 0;
      }
      menuAdd(form.value)
        .then((res) => {
          useAppStore.loading = false;
          show.value = false;
          loadPagination();
          loadTreeData();
        })
        .catch(() => {
          useAppStore.loading = false;
        });
    });
  }
  if (handleType.value == 2) {
    //编辑
    formRef.value.validate().then((res) => {
      useAppStore.loading = true;
      menuUpdate(form.value)
        .then((res) => {
          useAppStore.loading = false;
          show.value = false;
          loadPagination();
          loadTreeData();
        })
        .catch(() => {
          useAppStore.loading = false;
        });
    });
  }
};

const columns = [
  {
    title: "路由标题",
    dataIndex: "title",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      return h("div", {style: {textAlign: "left"}}, record.title);
    }
  },
  {
    title: "菜单类型",
    dataIndex: "type",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      if (record.type == 0) {
        return "目录";
      }
      if (record.type == 1) {
        return "菜单";
      }
      if (record.type == 2) {
        return "按钮";
      }
    }
  },
  {
    title: "图标",
    dataIndex: "icon",
    align: "center",
    width: 150
  },
  {
    title: "路由地址",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      if (record.openType == 3) {
        return record.link;
      } else {
        return record.router;
      }
    }
  },
  {
    title: "重定向地址",
    dataIndex: "redirect",
    width: 230,
    align: "center"
  },
  {
    title: "组件路径",
    dataIndex: "component",
    width: 230,
    align: "center"
  },
  {
    title: "唯一标识",
    dataIndex: "code",
    width: 150,
    align: "center"
  },
  {
    title: "是否隐藏",
    dataIndex: "isHidden",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      if (record.isHidden) {
        return "是";
      } else {
        return "否";
      }
    }
  },
  {
    title: "是否隐藏子菜单",
    dataIndex: "isHiddenChildren",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      if (record.isHiddenChildren) {
        return "是";
      } else {
        return "否";
      }
    }
  },
  {
    title: "是否启用",
    dataIndex: "status",
    align: "center",
    width: 150,
    customRender: ({record}) => {
      if (record.status == 1) {
        return "启用";
      } else {
        return "禁用";
      }
    }
  },
  {
    title: "排序",
    dataIndex: "sortId",
    align: "center",
    width: 150
  },
  {
    title: "操作",
    align: "center",
    width: 100,
    fixed: "right"
  }
];
</script>

<style lang="less" scoped></style>
